/**
 * 权限指令
 * 用于控制DOM元素的显示/隐藏
 */

import { hasPermission, hasAnyPermission, isAdmin, isAuthenticated } from '@/utils/auth'

/**
 * 权限指令 v-permission
 * 用法：
 * v-permission="'user:create'" - 单个权限
 * v-permission="['user:create', 'user:edit']" - 多个权限（任一）
 */
const permission = {
  mounted(el, binding) {
    const { value } = binding
    
    if (!value) {
      console.warn('v-permission 指令需要权限参数')
      return
    }
    
    let hasAuth = false
    
    if (Array.isArray(value)) {
      // 多个权限，有任一权限即可显示
      hasAuth = hasAnyPermission(value)
    } else if (typeof value === 'string') {
      // 单个权限
      hasAuth = hasPermission(value)
    }
    
    if (!hasAuth) {
      // 没有权限则移除元素
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}

/**
 * 管理员权限指令 v-admin
 * 只有管理员才能看到的元素
 */
const admin = {
  mounted(el, binding) {
    if (!isAdmin()) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}

/**
 * 登录权限指令 v-auth
 * 只有登录用户才能看到的元素
 */
const auth = {
  mounted(el, binding) {
    if (!isAuthenticated()) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}

/**
 * 角色权限指令 v-role
 * 用法：v-role="'admin'" 或 v-role="['admin', 'user']"
 */
const role = {
  mounted(el, binding) {
    const { value } = binding
    const user = JSON.parse(localStorage.getItem('user') || '{}')
    const userRole = user.role
    
    if (!value || !userRole) {
      el.parentNode && el.parentNode.removeChild(el)
      return
    }
    
    let hasRole = false
    
    if (Array.isArray(value)) {
      hasRole = value.includes(userRole)
    } else if (typeof value === 'string') {
      hasRole = userRole === value
    }
    
    if (!hasRole) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}

/**
 * 反向权限指令 v-no-permission
 * 没有权限时才显示的元素（如登录按钮）
 */
const noPermission = {
  mounted(el, binding) {
    const { value } = binding
    
    if (!value) {
      return
    }
    
    let hasAuth = false
    
    if (Array.isArray(value)) {
      hasAuth = hasAnyPermission(value)
    } else if (typeof value === 'string') {
      hasAuth = hasPermission(value)
    }
    
    if (hasAuth) {
      // 有权限则移除元素
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}

/**
 * 条件显示指令 v-show-if
 * 根据条件函数决定是否显示
 */
const showIf = {
  mounted(el, binding) {
    const { value } = binding
    
    if (typeof value === 'function') {
      if (!value()) {
        el.style.display = 'none'
      }
    } else if (typeof value === 'boolean') {
      if (!value) {
        el.style.display = 'none'
      }
    }
  },
  updated(el, binding) {
    const { value } = binding
    
    if (typeof value === 'function') {
      el.style.display = value() ? '' : 'none'
    } else if (typeof value === 'boolean') {
      el.style.display = value ? '' : 'none'
    }
  }
}

// 导出所有指令
export default {
  permission,
  admin,
  auth,
  role,
  'no-permission': noPermission,
  'show-if': showIf
}

// 单独导出各个指令
export {
  permission,
  admin,
  auth,
  role,
  noPermission,
  showIf
}
